<template>
  <div id="view">
    <div id="box">
      <div id="form">
        <p class="p1">注册</p>
        <p class="p2">
          <span class="country hoverhand" @click="showCountry">+{{area_code}}</span>
          <input type="number" v-model="mobile" placeholder="账号" class="placeholder">
        </p>
        <p class="p3">
          <input type="password" v-model="password_a" placeholder="设置登录密码" class="placeholder">
        </p>
        <p class="p3">
          <input type="password" v-model="password_b" placeholder="确认密码" class="placeholder">
        </p>
        <p class="p4">
          <input type="text" v-model="mobileCode" placeholder="短信验证码">
          <button class="getCode">
            <tongdun-Countdown  @run="sendCode" @getTdToken="getTdToken" wt='' hg='50px'
                                verfityMobile='true' ref="tdEle" beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60"/>
          </button>
        </p>
        <p class="p3">
          <input type="text" v-model="inviter_code" placeholder="邀请码(选填)" class="placeholder">
        </p>
        <p class="p6">
          <label for="agree">
            <input type="checkbox" v-model="agree" id="agree">
            <span>我已阅读</span>
          </label>
          <span class="agreement hoverhand" @click="seeAgreement">《“人人矿场”用户注册协议》</span>
        </p>
        <p class="p5">
          <button id="login" @click="register">注 册</button>
        </p>
        <p class="p7">
          <span>已有账户？</span>
          <router-link to="/login">登录</router-link>
        </p>
      </div>
    </div>
    <select-country ref="selCountry" @chosed="selectedCountry"/>
    <agree-ment ref="ag" hasReadText="已阅读此协议" @isRead=""/>
  </div>
</template>
<script>
  import { getAreaCode , getMbCode, postRegister} from "../http/api";
  export default {
    name: 'login',
    data() {
      return {
        introduce: '登录',
        mobile: '', //手机号
        password_a: '', //密码 1
        password_b: '', //密码 2
        mobileCode : '',//手机验证码
        areaList: '',//国家列表
        inviter_code : '',//邀请id
        inviter_uid : '',//inviter_uid
        country_id : '',//国家id
        area_code: '',//区域id
        selected_country : '',//选择的国家
        countrys : [], //国家列表
        agree : false, //是否同意协议
        yzm_token : null ,
        blackBox : null,
      }
    },
    components:{
      SelectCountry : resolve => { require(['../components/sel_country'], resolve) }, /*选择国家*/
      tongdunCountdown: resolve => { require(['../components/tongdunCountdown'], resolve) },//同盾倒计时功能插件
      AgreeMent: resolve => { require(['../components/AgreementDialog'], resolve) },//协议弹窗
    },
    watch:{
      mobile : function () {
        this.$refs.tdEle.getMobile(this.mobile);
      },
      mobileCode(val){
        if(val.indexOf('憨包') > -1){
          this.mobileCode = null;
          alert('★★★★★★是憨包');
        }
      }
    },
    mounted() {
      let thiz = this;
      let params = {};
      function getUrlKey(name , url){
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null;
      }
      let inviter_uid = getUrlKey("inviter_uid", window.location.href) || null;//判断是否有邀请inviter_uid
      if( inviter_uid ){
        thiz.inviter_uid = inviter_uid;
        params.inviter_uid = inviter_uid;
      }
      let inviter_code = getUrlKey("inviter_code", window.location.href) || null;//判断是否有邀请inviter_code
      if( inviter_code ){
        params.inviter_code = inviter_code;
        thiz.inviter_code = inviter_code;
      }
      getAreaCode(params).then(res => {
        thiz.countrys = res.data.country;
        thiz.area_code = thiz.countrys[0].area_code;
        thiz.country_id = thiz.countrys[0].id;
        thiz.selected_country = thiz.countrys[0];
      })
    },
    methods:{
      showCountry(){
        let thiz = this;
        thiz.$refs.selCountry.getAreaList(thiz.countrys);
      },
      selectedCountry( curCountry ){
        let item = curCountry.item;
        this.selected_country = item;
        this.area_code = item.area_code;
        this.country_id = item.id;
      },
      register(){
        let info = null , thiz = this;
        if(!this.mobile ){
          info = '请输入账号';
        }else if(!this.password_a ){
          info = '请输入密码';
        }else if(!this.password_b ){
          info = '请输入确认密码';
        }else if(!this.mobileCode ){
          info = '请输入验证码';
        }else if( !this.agree ){
          info = '请同意协议';
        }else if( this.password_a != this.password_b ){
          info = '两次密码输入不一致';
        }
        if( info ){
          require('../common/js/toast').toast(info);
        }else{
          let params = {
            telphone: thiz.mobile,
            area_code: thiz.area_code,
            password: thiz.password_a,
            smscode: thiz.mobileCode,
            country_id: thiz.country_id
          };
          if( thiz.inviter_code ){
            params.inviter_code = thiz.inviter_code;
          }
          if( thiz.inviter_uid ){
            params.invite_uid = thiz.inviter_uid;
          }
          postRegister(params).then(res => {
            if (res.code == 200) {
              require('../common/js/toast').toast('注册成功');
              thiz.$router.replace({path: '/login', query: {mobile: thiz.mobile, area_code: thiz.area_code, country_id: thiz.country_id}});
            }
          });
        }
      },
      sendCode() {
        //发送验证码
        let thiz = this ;
        if(!thiz.mobile){
          require('../common/js/toast').toast('请输入手机号');
        }else if(thiz.$refs.tdEle.interval != null){
          require('../common/js/toast').toast('请勿重复点击^_^');
        }else{
          let param = {
            blackBox: thiz.blackBox , yzm_token: thiz.yzm_token, mobile: thiz.mobile, area_code: thiz.area_code, country_id:thiz.country_id , type : 'register'
          };
          getMbCode(param).then(function (res) {
            if( res.code == 200){
              thiz.$refs.tdEle.begin();
              require('../common/js/toast').toast('验证码已发送至您的手机');
              thiz.isSendCode = true;
            }else{
              thiz.$refs.tdEle.resetTd();
            }
          })
        }
      },
      getTdToken(){
        //获取同盾token
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          if( thiz.mobile ){
            thiz.sendCode()
          }
        })
      },
      seeAgreement(){
        this.$refs.ag.agreement( require('../common/jsons/text').register.html );
      }
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #view{
    padding-top: 72px;
    #box{
      padding-top: 157px;padding-bottom: 140px;
      #form{
        .bgFFF();.boxShadow();.overHidden();.borderRadius();
        padding: 53px 50px;padding-bottom: 58px;width: 450px;margin: 0 auto;
        input{
          .input();.placeholder(14px);font-size: 14px;
        }
        .p1{
          font-size: 20px;padding-bottom: 50px;
        }
        .p2{
          .border;.overHidden;font-size: 0;height: 50px;border: 0;
          .country{
            background: #F1EEEE;.textCenter;color: #999999;font-family: 'MicrosoftYaHei';
            float: left;display: inline-block;width: 60px;height:100%;line-height: 50px;font-size: 14px;
            .borderRadius();border-top-right-radius: 0;border-bottom-right-radius: 0;
          }
          input{
            border: 0;float: left;width: calc( 100% - 60px );height: 100%;.border;border-top-left-radius: 0;border-bottom-left-radius: 0;
          }
        }
        .p3{
          padding-top: 30px;
        }
        .p4{
          padding-top: 30px;padding-bottom: 0px;.textRight;.overHidden;
          >input{
            width: 224px;float: left;
          }
          >button{
            .submit();float: right;width: 118px;height: 50px;position: relative;font-size: 14px;line-height: 50px;
           /deep/ span{
              >span{
                line-height: 50px;
              }
            }
          }
          a{
            .colorYellow;font-size: 14px;
          }
        }
        .p5{
          button{
            .submit;
          }
        }
        .p6{
          .overHidden();padding-top: 40px;padding-bottom: 10px;
          label{
            position: relative;padding-left: 25px;float: left;font-size: 14px;color: #999999;
            input{
              opacity: 0;position: absolute;z-index: 2;width: 100%;height: 100%;left: 0;top:0;
              &:hover{
                cursor: pointer;
              }
            }
            >span{
              line-height: 25px;
              &:before{
                .checkBox();position: absolute;z-index: 1;left: 0;top: 50%;.tranY50();
              }
            }
            input:checked+span{
              &:before{
                .checked();
              }
            }
          }
          .agreement{
            .colorYellow;font-size: 14px;float: left;line-height: 25px;
          }
        }
        .p7{
          color: #999999;font-size: 14px;.textCenter;width: 100%;padding-top: 26px;
          >a{
            .colorYellow;
          }
        }
      }
    }
  }
</style>
